<template>
  <div class="layout-pd">
    <div class="order-infos">
      <h3 class="mb10">订单信息</h3>
      <div v-if="state.dataObj" class="infos">
        <div class="item-info">用户：{{ state.dataObj.username }}</div>
        <div class="item-info">订单编号：{{ state.dataObj.order_no }}</div>
        <div class="item-info">订单状态：{{ state.orderStatusArr[state.dataObj.order_status].label }}</div>
      </div>
    </div>
    <div v-if="state.dataObj" class="pro-list">
      <h3 class="mb10">产品列表</h3>
      <YxTable
        :header-cell-style="{ background: '#f5f7fa' }"
        border
        :selection="false"
        :isSerialNum="false"
        :data="state.dataObj.list"
        :columnData="state.columnData"
        :isPage="false"
        :showOperator="false"
      >
        <template v-slot:pname="{ row }">
          <div class="conts">
            <div>{{ row.pname }}</div>
            <img class="imgs" :src="row.model_img" />
          </div>
        </template>
        <template v-slot:specifications="{ row }">
          <div class="textleft">
            <div>volume: {{ row.specifications && JSON.parse(row.specifications).volume }}</div>
            <div>vertices: {{ row.specifications && JSON.parse(row.specifications).vertices }}</div>
            <div>surface: {{ row.specifications && JSON.parse(row.specifications).surface }}</div>
          </div>
        </template>
      </YxTable>
      <!-- <div class="lists">
        <div class="item-list" v-for="(item, index) in headList" :key="index" :class="`lists${index}`">
          {{ item }}
        </div>
      </div>
      <div v-if="state.dataObj && state.dataObj.list" class="cons">
        <div class="itm-cons"  v-for="(item, index) in state.dataObj.list" :key="index" :class="`cons${index}`">
          <div class="flex1">{{ item.pname }}</div>
          <div class="flex15">
            <div>volume: {{ item && item.specifications && JSON.parse(item.specifications).volume }}
            </div>
            <div>vertices: {{ item && item.specifications && JSON.parse(item.specifications).vertices }}
            </div>
            <div>surface: {{ item && item.specifications && JSON.parse(item.specifications).surface }}
            </div>
          </div>
          <div class="flex1">{{ item.material_name }}</div>
          <div class="flex1">{{ item.pcount }}</div>
          <div class="flex1">{{ item.price }}</div>
          <div class="flex1">{{ item.content }}</div>
        </div>
      </div> -->
    </div>
    <div class="expenses">
      <div class="leftright">
        <div class="lefts">
          <div v-if="state.addresses" class="tops">
            <h4>运输</h4>
            <div class="transport">
              <div class="wid50 key-val">
                <div class="key">姓名：</div>
                <div class="val">{{ state.addresses.recipient_name }}</div>
              </div>
              <div class="wid50 key-val">
                <div class="key">公司：</div>
                <div class="val">{{ state.addresses.corporate_name }}</div>
              </div>
              <div class="wid100 key-val">
                <div class="key">地址：</div>
                <div class="val">{{ state.addresses.detailed_address }}</div>
              </div>
              <div class="wid50 key-val">
                <div class="key">电话：</div>
                <div class="val">{{ state.addresses.recipient_mobile }}</div>
              </div>
              <div class="wid50 key-val">
                <div class="key">邮政编码：</div>
                <div class="val">{{ state.addresses.postal_code }}</div>
              </div>
              <div class="wid100 key-val">
                <div class="key">快递公司名称：</div>
                <div class="val">{{ state.addresses.carrier_company }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="state.dataObj" class="rights">
          <h4>支付</h4>
          <div class="wid100 key-val flex-cen-bet">
            <div class="key">小计：</div>
            <div class="val">0</div>
          </div>
          <div class="wid100 key-val flex-cen-bet">
            <div class="key">已支付金额：</div>
            <div class="val">{{ state.dataObj.pay_price }}</div>
          </div>
          <div class="wid100 key-val flex-cen-bet">
            <div class="key">付款方式：</div>
            <div class="val">{{ state.payTypeArr[state.dataObj.pay_type].label }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="clueManageIndex">
import { onMounted, reactive, defineAsyncComponent  } from 'vue';
import { orderDetail } from '/@/api/startfab/index';
import { orderStatusArr, payTypeArr } from '/@/commmon/variate';
import { orderDetaColumn } from '/@/commmon/column';
import { useRoute } from 'vue-router';
const route = useRoute();
const YxTable = defineAsyncComponent(() => import('/@/components/YxTable/index.vue'));

const state = reactive({
  columnData: orderDetaColumn,
  orderStatusArr: orderStatusArr,
  payTypeArr: payTypeArr,
  dataObj: null,
  addresses: null
})
const getData = () => {
  const params = {
    id: route.query.id
  }
  orderDetail(params).then((res) => {
    if (res.code === 10000) {
      state.dataObj = res.data.order
      state.addresses = res.data.addresses_data
    }
  })
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
.layout-pd {
  .order-infos {
    background: #FFFFFF;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
    .infos {
      display: flex;
      margin-bottom: 10px;
      .item-info {
        height: 32px;
        line-height: 32px;
        margin-right: 20px;
        border-radius: 8px;
      }
    }
  }
  .pro-list {
    background: #FFFFFF;
    padding: 10px;
    border-radius: 8px;
    .lists {
      display: flex;
      background: #f2fdfa;
      width: 100%;
      padding: 10px;
      line-height: 20px;
      margin: 4px 0;
      box-shadow: 0 0 10px rgba(0, 194, 130, 0.05);
      border-radius: 6px;
      transition: 0.5s;
      border: 1px solid rgba(0, 194, 130, 0.2);
      margin-top: 10px;
      .item-list {
        flex: 1;
        font-size: 12px;
      }
      .lists1 {
        flex: 1.5;
      }
    }
    .cons {
      margin-top: 10px;
      .itm-cons {
        display: flex;
        .flex1 {
          flex: 1;
          margin-bottom: 10px;
        }
        .flex15 {
          flex: 1.5;
        }
      }
    }
  }
  .expenses {
    border-radius: 8px;
    margin-top: 10px;
    .bgs {
      background: #FFFFFF;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 8px;
    }
    .leftright {
      width: 100%;
      height: 240px;
      display: flex;
      .lefts {
        flex: 3;
        height: 100%;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .tops {
          width: 100%;
          flex: 1;
          background: #FFFFFF;
          padding: 10px;
          border-radius: 8px;
          .transport {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
          }
        }
      }
      .rights {
        flex: 2;
        height: 100%;
        background: #FFFFFF;
        border-radius: 8px;
        padding: 10px;
      }
    }
  }
}
.mb10 {
  margin-bottom: 10px;
}
.textleft {
  text-align: left;
}
.imgs {
  width: 50px;
  height: 50px;
}
.wid50 {
  width: 50%;
}
.wid100 {
  width: 100%;
}
.key-val {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.flex-cen-bet {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
